<template>
	<view class="u-wrap">
	<scroll-view >
		<view class="content">
			<u-toast ref="uToast" />
			<u-button shape="circle" size="mini" :custom-style="mdp" @click="handmodify">更改个人资料</u-button>
			<!-- 个人资料 -->
			<view>
				<view class="_img">
					<u-image width="160" height="160rpx" :src='user.avatar' shape='circle'></u-image>
					<u-icon name="camera-fill" size="40" class="u-icon"></u-icon>

				</view>
				<view class="_data">
					<view style="margin-bottom: 9rpx; font-size: 42rpx;">{{user.realName}}
						<u-icon name="woman" style="margin-left: 20rpx;" v-if="user.sex=='1'"></u-icon>
						<u-icon name="man" style="margin-left: 20rpx;" v-if="user.sex=='0'"></u-icon>
					</view>
					<view style="margin-bottom: 9rpx;font-size: 37rpx;">{{user.birthTime}}</view>
					<view style=" font-size: 37rpx">{{user.area}}</view>
				</view>
				<view class="autograph">
					个性签名:<input type="text" v-model="user.signature" @blur='changeAutograph' />

				</view>
				<!-- 模态框 -->
				<u-modal v-model="show" show-cancel-button=true mask-close-able=true title='请选择要上传的二维码' @confirm='confirm' :async-close="true">
					<view style="margin-left: 15%;">
						<u-upload ref="uUpload" action="https://tt.weidm.cn/common/upload" :auto-upload="false" max-count="1" :header="header" width=400 height=400
						 @on-change='handEvent()'></u-upload>
					</view>

				</u-modal>
				<!-- 抖音二维码 -->
				<view class="QR-code">


					<image :src="user.qrCode" mode="" style="width: 100%;height: 100%;"></image>
				</view>

				<u-button size="medium" @click="submit()" :custom-style="erweimabtn">更换抖音码</u-button>
				<view style="margin-left: 120rpx;">
					<text>请放心上传您的抖音二维码，只有跟您同样</text><br/>
					<text>名字或者生日的人才能通过此二维码找到您</text>
				</view>
				
				
			</view>
		</view>
		<view class="advertisement">
			<ad unit-id="70b5n6l4fh73e998m8" @binderror='handerror' appid='tt190f6fb2862af803' @error='handerror'></ad>
		</view>
	</scroll-view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				header: {
					'authorization': uni.getStorageSync('authorization')
				},
				erweimabtn: {
					'position': 'relative',
					'top': '-130rpx',
					'width': ' 230rpx',
					'background-color': '#98C1FF',
					'left': '255rpx',
				},
				mdp: {
					'position': 'relative',
					'left': '70%',
					'background-color': '#98C1FF',
					'top': '20rpx',
					'right': '80rpx'
				},
				lists: '',
				
				show: false,
				user: {
					qrCode: '../../static/code.png',
					avatar: '',
					realName: '',
					birthTime: '',
					area: '',
					avatarUrl: '',
					signature: "12312",
				},
			}
		},

		onShareAppMessage(option) {
			return {
				title: '快来康康同样的TA',
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				path: '/page/center/index', // ?后面的参数会在转发页面打开时传入onLoad方法
				
				templateId: 'xmqi3vul2929i5gn3b',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		methods: {
			handfenxiang() {
				console.log(12312)
				var obj = {
					withShareTicket: true,
					title: '同样的他',
					content: '自定义内容',
					imageUrl: '../../static/17@2x.png',
					path: 'pages/center/index',
				}
				uni.showShareMenu({
					withShareTicket: true,
					title: '同样的他',
					content: '自定义内容',
					imageUrl: '../../static/17@2x.png',
					path: 'pages/center/index',
					success(e) {
						console.log(e)
						console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
					},
					fail() {
						console.log('转发发布器调起失败');
					}
				})

				console.log(2314)
			},
			handerror(e) {
				console.log('错误')
				console.log(e, '错误')
			},
			//签名输入框失去焦点时触发
			changeAutograph() {
				this.$u.post('system/user/profile', {
					signature: this.user.signature,
					isUpdate:0,
				}).then(res => {
					console.log(res)
				})
			},

			getinfo() {
				//获取个人信息
				const authorization = uni.getStorageSync('authorization');
				this.$u.get('/system/user/profile', {}, {
					'authorization': authorization,


				}).then(res => {
					this.user = res.data

				})
			},
			handEvent(res) {

				console.log(12312123)
				let data = JSON.parse(res.data)
				if (res.statusCode != 200) {
					this.$refs.uToast.show({
						title: '上传失败',
						type: 'error',

					})

				} else {

					let user = {
						'qrCode': 'https://tt.weidm.cn' + data.fileName,
						isUpdate:0,
					}

					this.$u.post('/system/user/profile', user).then(res => {
						// console.log(res)
						this.getinfo()
					})
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success',

					})
					this.show = false;
					
				}
			},
			//点击更换抖音二维码
			submit() {
				this.show = true

			},
			//点击更换之后确定
			confirm() {
				console.log('开始')
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists
 console.log(files)
				if (!files.lastItem) {
					this.$refs.uToast.show({
						title: '上传二维码不能为空',
						type: 'error',

					})
				} else {
					console.log('结束')
					this.$refs.uUpload.upload()

				}
			},


			// 跳转修改个人信息页面
			handmodify() {
				this.$u.route('pages/modification/index')

			},
			onShow() {
				this.getinfo()

			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-wrap {

		padding: 5rpx 5rpx 0 5rpx;
	}

	.advertisement {
		margin-top: 4%;
		font-family: PingFang SC;
		width: 100%;
		// margin-bottom: 6%;
		position: relative;
		bottom: -50rpx;
		box-shadow: 0px 2px 5px #888888;
		border: 2px darkslategray;
	}

	.content {

		font-family: PingFang SC;

		font-weight: 400;

		width: 100%;
		height: 1200rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(78, 78, 78, 0.12);
		opacity: 1;
		border-radius: 20px;

		.autograph {
			font-size: 35rpx;
			font-weight: 400;
			color: #707070;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			opacity: 1;
			position: relative;
			bottom: 190rpx;
			left: 60rpx;

			input {
				position: relative;
				left: 156rpx;
				bottom: 50rpx
			}
		}


		._img {
			margin-left: 30rpx;
			margin-top: 12rpx;
			position: relative;
			left: 20rpx;
			bottom: 24rpx;

			.u-icon {
				position: relative;
				left: 106rpx;
				bottom: 30rpx;
			}
		}

		._data {
			position: relative;
			left: 35%;
			line-height: 45rpx;
			opacity: 1;
			bottom: 220rpx;
			font-size: 35rpx;
		}

		.QR-code {
			width: 500rpx;
			height: 500rpx;
			margin: auto;
			background-color: #FFFFFF;
			box-shadow: 1px 1px 1px 1px #888888;
			border: 2px darkslategray;
			position: relative;
			bottom: 200rpx;
			border-radius: 7px;
		}

		.erweimabtn {}

	}
</style>
